<template>
    <section class="wrapper">
      <myHeader :obj="myObj" @events="events"></myHeader>
      <main>
        <div class="gradeTitle_0313">
          <p class="pTitle_0313">行家话题: 企业培训、公司文化建立</p>
          <p class="pType_0313">一对一约见：¥200</p>
        </div>
        <myProgress :level="level"></myProgress>
        <div class="bigCircleWrap_0310">
          <div class="items_0310 dt_0310"><i class="bigCircle_0310"></i></div>
          <div class="items_0310"></div>
        </div>
        <div class="infoWrap_0310">
        <div class="infoItem_0310">
          <label class="label_0310">行家</label>
          <div class="info_0310">刘宏</div>
        </div>
      </div>
      <div class="infoWrap_0310">
        <div class="infoItem_0310">
          <label class="label_0310 colorB_0315">开始时间</label>
          <div class="info_0310"><time class="time">2018-10-23 9:00</time>
          </div>
        </div>
      </div>
      <div class="infoWrap_0310">
        <div class="infoItem_0310">
          <label class="label_0310 colorB_0315">结束时间</label>
          <div class="info_0310">
            <time class="time">2018-10-23 9:00</time>  <i class="iIcon_0310"></i>
          </div>
        </div>
      </div>
      <div class="infoWrap_0310">
        <div class="infoItem_0310">
          <label class="label_0310 colorB_0315">联系电话</label>
          <div class="info_0310">
             <div class="time colorBlue_0316">13444321234</div>
          </div>
        </div>
      </div>
      <div class="infoWrap_0310">
        <div class="infoItem_0310">
          <label class="label_0310 colorB_0315">约见地点</label>
          <div class="info_0310">
            <div class="postions_0316">中国广东省广州市美博会F栋4楼</div>
          </div>
        </div>
      </div>
      <div class="infoWrap_0310 agree_0312">同意并支付</div>
      <router-link to="/abolish"><button class="button_0312">取消约见</button></router-link>




        <!-- <div class="iconWrap_0310">
          <div class="dIcon_0310"><i class="icon_0310"></i></div>
          <strong class="strong_0310">行家已同意约见</strong>
          <p class="p_0310">请支付约见金额后，与行家进一步沟通</p>
        </div>
        <router-link to="/meetUp"><button class="button_0310">去支付300元</button></router-link> -->
      </main>

    </section>
</template>
<script>
import myHeader from './base/myHeader';
import myProgress from './base/myProgress';
export default {
  
  data () {
    return {
      myObj: {
        type: 5,
        text: '约见详情'
      },
      level: 2
    }
  },
  methods: {
    events(i) {
      if(i == 2) {
        history.back();
      }

    }
    
  },
  components: {
    myHeader,
    myProgress
  }
}

</script>
<style lang="less">
 .wrapper {
   width: 3.75rem;
   height: 100%;
   main {
    width: 3.75rem;
    height: 100%;
    padding-top: .44rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    .button_0312 {
      width: 3.35rem;
      height: .47rem;
      display: block;
      border: none;
      background: #557AFF;
      color: white;
      font-size: .18rem;
      margin: 0 auto;
      border-radius: .05rem;
    }
    .agree_0312 {
      font-size: .2rem;
      color: #555555;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0!important;
      margin-bottom: .27rem;
    }
    .infoWrap_0310 {
      width: 100%;
      height: .43rem;
      padding-left: .15rem;
      box-sizing: border-box;
      background: white;
      .infoItem_0310 {
        width: 3.6rem;
        height: .42rem;
        border-bottom: .01rem solid #E5E5E5;
        display: flex;
        justify-content: space-between;
        .label_0310 {
          display: block;
          width: 1.05rem;
          height: .42rem;
          line-height: .42rem;
          font-size: .17rem;
          color: #000000;
        }
        .colorB_0315 {
          font-weight: 500;
        }
        .info_0310 {
          width: 2.5rem;
          height: .42rem;
          line-height: .42rem;
          color: #828282;
          font-size: .17rem;
          padding-right: .15rem;
          box-sizing: border-box;
          text-align: right;
          .postions_0316 {
            width: 2.5rem;
            height: .42rem;
            line-height: .42rem;
            color: #B2B2B2;
            float: right;
            text-align: right;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .phone_0310 {
            width: 1.26rem;
            height: .4rem;
            font-size: .17rem;
            color: #B2B2B2;
            border: none;
          }
          .time {
            width: 1.26rem;
            display:block;
            float: right;
          }
          .colorBlue_0316 {
           color: #557AFF;
          }
          .position_0310 {
            height: .4rem;
            font-size: .17rem;
            color: #B2B2B2;
            border: none;
            float: right;
          }
          .time_0310 {
            font-size: .17rem;
            color: #B2B2B2;
          }
        }
      }
    }
    .bigCircleWrap_0310 {
      height: 0.92rem;
      .items_0310 {
        height: 50%;
        background: white;
        .bigCircle_0310 {
          display: block;
          width: .6rem;
          height: .6rem;
          border: .05rem solid white;
          background: #E5E5E5;
          border-radius: 50%;
          margin: 0 auto;
          position: relative;
          z-index: 3;
        }
      }
      .dt_0310 {
        background: #EFEFF4;
        padding-top: .11rem;
        box-sizing: border-box;
      }
    }
    .gradeTitle_0313 {
      width: 100%;
      height: .82rem;
      background: #FAFAFA;
      .pTitle_0313 {
        font-size: .16rem;
        color:#555555;
        text-align: center;
        padding: .19rem 0 .14rem;
      }
      .pType_0313 {
        font-size: .18rem;
        color: #39393D;
        text-align: center;
        font-weight: bold;
      }
    }
    .button_0310 {
      width: 3.35rem;
      height: .47rem;
      display: block;
      border: none;
      background: #828282;
      color: white;
      font-size: .18rem;
      margin: 0 auto;
      border-radius: .05rem;
    }
    // .iconWrap_0310 {
    //   margin-bottom: 1.7rem;
    //   text-align: center;
    //   .dIcon_0310 {
    //     padding: .26rem 0 .1rem;
    //     .icon_0310 {
    //       display: block;
    //       width: .93rem;
    //       height: .93rem;
    //       margin: 0 auto;
    //       background: black;
    //       background: url("../assets/img/my@3x.png") center center;
    //       background-size: cover;
    //     }
    //   }
    //   .strong_0310 {
    //     display: block;
    //     text-align: center;
    //     font-size: .2rem;
    //     padding-bottom: .1rem;
    //   }
    //   .p_0310 {
    //     color:#888888;
    //     font-size: .14rem;
    //   }
    // }
  }

}
  
</style>
